<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <!-- Required meta tags-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="au theme template">
    <meta name="author" content="Hau Nguyen">
    <meta name="keywords" content="au theme template">

    <!-- Title Page-->
    <title>智能制造平台</title>

    <!-- Fontfaces CSS-->
    <link th:href="@{css/font-face.css}" rel="stylesheet" media="all">
    <link th:href="@{vendor/font-awesome-4.7/css/font-awesome.min.css}" rel="stylesheet" media="all">
    <link th:href="@{vendor/font-awesome-5/css/fontawesome-all.min.css}" rel="stylesheet" media="all">
    <link th:href="@{vendor/mdi-font/css/material-design-iconic-font.min.css}" rel="stylesheet" media="all">

    <!-- Bootstrap CSS-->
    <link th:href="@{vendor/bootstrap-4.1/bootstrap.min.css}" rel="stylesheet" media="all">

    <!-- Vendor CSS-->
    <link th:href="@{vendor/animsition/animsition.min.css}" rel="stylesheet" media="all">
    <link th:href="@{vendor/bootstrap-progressbar/bootstrap-progressbar-3.3.4.min.css}" rel="stylesheet" media="all">
    <link th:href="@{vendor/wow/animate.css}" rel="stylesheet" media="all">
    <link th:href="@{vendor/css-hamburgers/hamburgers.min.css}" rel="stylesheet" media="all">
    <link th:href="@{vendor/slick/slick.css}" rel="stylesheet" media="all">
    <link th:href="@{vendor/select2/select2.min.css}" rel="stylesheet" media="all">
    <link th:href="@{vendor/perfect-scrollbar/perfect-scrollbar.css}" rel="stylesheet" media="all">

    <!-- Main CSS-->
    <link th:href="@{css/theme.css}" rel="stylesheet" media="all">

    <script th:src="@{js/echarts.min.js}">
    </script>
    <script>
        function selectInfo() {
            $.ajax({
                url: "/selectinfo",
                type: "post",
                success: function (data) {
                    //字符串转json
                    var p = eval('(' + data + ')');
                    document.getElementById("num1").innerText = p.num1;
                    document.getElementById("num2").innerText = p.num2;
                    document.getElementById("num3").innerText = p.num3;
                    document.getElementById("num4").innerText = p.num4;

                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('main'));

                    myChart.setOption({
                        series : [
                            {
                                name: '订单监控',
                                type: 'pie',    // 设置图表类型为饼图
                                radius: '75%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                                data:[          // 数据数组，name 为数据项名称，value 为数据项值
                                    {value: p.num1, name:'订单未接单'},
                                    {value:p.num2, name:'订单已接单'},
                                    {value:p.num5, name:'订单已拒绝'},
                                    {value:p.num3, name:'订单生产中'},
                                    {value:p.num4, name:'订单已完成'}
                                ]
                            }
                        ]
                    })
                }
            })
        }
    </script>
</head>

<body class="animsition" onload="selectInfo()">
    <div class="page-wrapper">
        <!-- HEADER MOBILE-->
        <header class="header-mobile d-block d-lg-none">
            <div class="header-mobile__bar">
                <div class="container-fluid">
                    <div class="header-mobile-inner">
                        <a class="logo" href="/index">
                            <!-- <img src="images/icon/logo.png" alt="CoolAdmin" /> -->
                            <h1>502畜牧养殖基地管理平台</h1>
                        </a>
                        <button class="hamburger hamburger--slider" type="button">
                            <span class="hamburger-box">
                                <span class="hamburger-inner"></span>
                            </span>
                        </button>
                    </div>
                </div>
            </div>
        </header>
        <!-- END HEADER MOBILE-->

        <!-- MENU SIDEBAR-->
        <aside class="menu-sidebar d-none d-lg-block">
            <div class="logo">
                <a href="index.html">
                    <!-- <img src="images/icon/logo.png" alt="Cool Admin" /> -->
                    <h4>502畜牧养殖基地管理平台</h4>
                </a>
            </div>
            <div class="menu-sidebar__content js-scrollbar1">
                <nav class="navbar-sidebar">
                    <ul class="list-unstyled navbar__list">
                        <li class="has-sub">
                            <a class="js-arrow" href="#">
                                <i class="fa fa-magnet"></i>产品管理</a>
                            <ul class="list-unstyled navbar__sub-list js-sub-list">
                                <li>
                                    <a th:href="@{/selectallproducts}"><i class="fa fa-magnet"></i>产品信息管理</a>
                                </li>
                            </ul>
                        </li>

                        <li class="has-sub">
                            <a class="js-arrow" href="#">
                                <i class="fa fa-cogs"></i>设备管理</a>
                            <ul class="list-unstyled navbar__sub-list js-sub-list">
                                <li>
                                    <a th:href="@{selectallequipment}"><i class="fa fa-cogs"></i>设备信息管理</a>
                                </li>
                                <li>
                                    <a th:href="@{selectallequipmentproduct}"><i class="fa fa-cogs"></i>产品设备信息管理</a>
                                </li>
                            </ul>
                        </li>

                        <li class="has-sub">
                            <a class="js-arrow" href="#">
                                <i class="fa fa-bell"></i>订单管理</a>
                            <ul class="list-unstyled navbar__sub-list js-sub-list">
                                <li>
                                    <a th:href="@{selectallproductorder}"><i class="fa fa-bell"></i>订单信息管理</a>
                                </li>
                            </ul>
                        </li>

                        <li class="has-sub">
                            <a class="js-arrow" href="#">
                                <i class="fa fa-edit (alias)"></i>生产计划管理</a>
                            <ul class="list-unstyled navbar__sub-list js-sub-list">
                                <li>
                                    <a th:href="@{selectallproductplan}"><i class="fa fa-edit (alias)"></i>计划信息管理</a>
                                </li>
                            </ul>
                        </li>

                        <li class="has-sub">
                            <a class="js-arrow" href="#">
                                <i class="fa fa-gavel"></i>生产调度管理</a>
                            <ul class="list-unstyled navbar__sub-list js-sub-list">
                                <li>
                                    <a th:href="@{selectallproductschedule}"><i class="fa fa-gavel"></i>调度信息管理</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </nav>
            </div>
        </aside>
        <!-- END MENU SIDEBAR-->

        <!-- PAGE CONTAINER-->
        <div class="page-container">
            <!-- HEADER DESKTOP-->
            <header class="header-desktop">
                <div class="section__content section__content--p30">
                    <div class="container-fluid">
                        <div class="header-wrap">
                            <form class="form-header" action="" method="POST">
                                <input class="au-input au-input--xl" type="text" name="search" placeholder="Search for datas &amp; reports..." />
                                <button class="au-btn--submit" type="submit">
                                    <i class="zmdi zmdi-search"></i>
                                </button>
                            </form>
                            <div class="header-button">
                                <div class="account-wrap">
                                    <div class="account-item clearfix js-item-menu">
                                        <div class="content">
                                            <a class="js-acc-btn" href="#" th:text="${session.user.user_name}"></a>
                                        </div>
                                        <div class="account-dropdown js-dropdown">
                                            <div class="info clearfix">
                                                <div class="content">
                                                    <h5 class="name">
                                                        <a href="#" th:text="${session.user.user_name}"></a>
                                                    </h5>
                                                    <span class="email">kexing.site</span>
                                                </div>
                                            </div>
                                            <div class="account-dropdown__footer">
                                                <a th:href="@{deletesession}">
                                                    <i class="zmdi zmdi-power"></i>Logout</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </header>
            <!-- HEADER DESKTOP-->

            <!-- MAIN CONTENT-->
            <div class="main-content">
                <div class="section__content section__content--p30">
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-md-12">
                                <div class="overview-wrap">
                                    <h2 class="title-1">订单智能监控</h2>
                                    <button class="au-btn au-btn-icon au-btn--blue">
                                        <i class="zmdi zmdi-plus"></i>add item</button>
                                </div>
                            </div>
                        </div>
                        <div class="row m-t-25">
                            <div class="col-sm-6 col-lg-3">
                                <div class="overview-item overview-item--c1">
                                    <div class="overview__inner">
                                        <div class="overview-box clearfix">
                                            <div class="icon">
                                                <i class="zmdi zmdi-account-o"></i>
                                            </div>
                                            <div class="text">
                                                <h2 id="num1"></h2>
                                                <span>订单未接单</span>
                                            </div>
                                        </div>
                                        <div class="overview-chart">
                                            <canvas id="widgetChart1"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6 col-lg-3">
                                <div class="overview-item overview-item--c2">
                                    <div class="overview__inner">
                                        <div class="overview-box clearfix">
                                            <div class="icon">
                                                <i class="zmdi zmdi-shopping-cart"></i>
                                            </div>
                                            <div class="text">
                                                <h2 id="num2"></h2>
                                                <span>订单已接单</span>
                                            </div>
                                        </div>
                                        <div class="overview-chart">
                                            <canvas id="widgetChart2"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6 col-lg-3">
                                <div class="overview-item overview-item--c3">
                                    <div class="overview__inner">
                                        <div class="overview-box clearfix">
                                            <div class="icon">
                                                <i class="zmdi zmdi-calendar-note"></i>
                                            </div>
                                            <div class="text">
                                                <h2 id="num3"></h2>
                                                <span>订单生产中</span>
                                            </div>
                                        </div>
                                        <div class="overview-chart">
                                            <canvas id="widgetChart3"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-6 col-lg-3">
                                <div class="overview-item overview-item--c4">
                                    <div class="overview__inner">
                                        <div class="overview-box clearfix">
                                            <div class="icon">
                                                <i class="zmdi zmdi-money"></i>
                                            </div>
                                            <div class="text">
                                                <h2 id="num4"></h2>
                                                <span>订单完成</span>
                                            </div>
                                        </div>
                                        <div class="overview-chart">
                                            <canvas id="widgetChart4"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="row"  >
                            <div class="col-lg-12">
                                <div class="au-card chart-percent-card">
                                    <div class="au-card-inner">
                                        <h3 class="title-2 tm-b-5"><h3 class=" title-2" style="font-family: Gabriola;font-size: 35px"><I>养猪！我们是认真的！</I></h3></h3>
                                        <div class="row no-gutters">
                                            <div class="col-xl-12" style="height: 400px" id="main">
                                            </div>
                                            <script type="text/javascript">

                                            </script>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- END MAIN CONTENT-->
            <!-- END PAGE CONTAINER-->
        </div>

    </div>


    <!-- Jquery JS-->
    <script th:src="@{vendor/jquery-3.2.1.min.js}"></script>
    <!-- Bootstrap JS-->
    <script th:src="@{vendor/bootstrap-4.1/popper.min.js}"></script>
    <script th:src="@{vendor/bootstrap-4.1/bootstrap.min.js}"></script>
    <!-- Vendor JS       -->
    <script th:src="@{vendor/slick/slick.min.js}">
    </script>
    <script th:src="@{vendor/wow/wow.min.js}"></script>
    <script th:src="@{vendor/animsition/animsition.min.js}"></script>
    <script th:src="@{vendor/bootstrap-progressbar/bootstrap-progressbar.min.js}">
    </script>
    <script th:src="@{vendor/counter-up/jquery.waypoints.min.js}"></script>
    <script th:src="@{vendor/counter-up/jquery.counterup.min.js}">
    </script>
    <script th:src="@{vendor/circle-progress/circle-progress.min.js}"></script>
    <script th:src="@{vendor/perfect-scrollbar/perfect-scrollbar.js}"></script>
    <script th:src="@{vendor/chartjs/Chart.bundle.min.js}"></script>
    <script th:src="@{vendor/select2/select2.min.js}">
    </script>

    <!-- Main JS-->
    <script th:src="@{js/main.js}"></script>

</body>

</html>
<!-- end document-->
